<template>
  <div class="home-container">
    <a-spin :spinning="loading">
      <div class="overview-cards">
        <div class="card-item" @click="handleToContributionMgr('approval-list')">
          <div class="card-content">
            <div class="icon">
              <img src="@/assets/img/main/home/1.png" alt="总报题" />
            </div>
            <div class="info">
              <div class="label">总报题</div>
              <div class="value">{{ overview.total_count || 0 }}</div>
            </div>
          </div>
        </div>
        <div class="card-item">
          <div class="card-content">
            <div class="icon">
              <img src="@/assets/img/main/home/2.png" alt="已通过" />
            </div>
            <div class="info">
              <div class="label">已通过</div>
              <div class="value success">{{ overview.approved_count || 0 }}</div>
            </div>
          </div>
        </div>
        <div class="card-item">
          <div class="card-content">
            <div class="icon">
              <img src="@/assets/img/main/home/3.png" alt="审批中" />
            </div>
            <div class="info">
              <div class="label">审批中</div>
              <div class="value warning">{{ overview.pending_count || 0 }}</div>
            </div>
          </div>
        </div>
        <div class="card-item">
          <div class="card-content">
            <div class="icon">
              <img src="@/assets/img/main/home/4.png" alt="已拒绝" />
            </div>
            <div class="info">
              <div class="label">已拒绝</div>
              <div class="value danger">{{ overview.rejected_count || 0 }}</div>
            </div>
          </div>
        </div>
        <div class="card-item">
          <div class="card-content">
            <div class="icon">
              <img src="@/assets/img/main/home/5.png" alt="已撤回" />
            </div>
            <div class="info">
              <div class="label">已撤回</div>
              <div class="value primary">{{ overview.withdrawn_count || 0 }}</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 我的 -->
      <div class="overview-cards-1">
        <div class="card-item" @click="handleToContributionMgr('approved-approver')">
          <div class="card-content">
            <div class="icon">
              <img src="@/assets/img/main/home/2.png" alt="我的已审批" />
            </div>
            <div class="info">
              <div class="label">我的已审批</div>
              <div class="value success">{{ overview.my_processed_count || 0 }}</div>
            </div>
          </div>
        </div>
        <div class="card-item" @click="handleToContributionMgr('pending-approver')">
          <div class="card-content">
            <div class="icon">
              <img src="@/assets/img/main/home/5.png" alt="我的待审批" />
            </div>
            <div class="info">
              <div class="label">我的待审批</div>
              <div class="value primary">{{ overview.my_pending_count || 0 }}</div>
            </div>
          </div>
        </div>
      </div>

    </a-spin>
  </div>
</template>

<script>
  import {
    apiApprovalGetStatistics
  } from '@/api/featch'

  export default {
    name: 'home',
    data() {
      return {
        loading: false,
        overview: {}
      }
    },
    mounted() {
      this.fetchOverview()
    },
    methods: {
      async fetchOverview() {
        this.loading = true
        try {
          const res = await apiApprovalGetStatistics()
          if (res.code === 200) {
            this.overview = res.data
          } else {
            this.$message.error(res.message || '获取概览数据失败')
          }
        } catch (error) {
          console.error('获取概览数据失败:', error)
          this.$message.error('获取概览数据失败')
        } finally {
          this.loading = false
        }
      },
      handleToContributionMgr(name) {
        this.$router.push({
          name
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .home-container {
    padding: 24px;

    .overview-cards {
      display: flex;
      justify-content: space-between;
      margin: -12px;

      .card-item {
        flex: 1;
        padding: 12px;
        cursor: pointer;

        .card-content {
          background: #fff;
          padding: 32px;
          border-radius: 8px;
          display: flex;
          align-items: center;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
          transition: all 0.3s;
          min-height: 160px;

          &:hover {
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
            transform: translateY(-2px);
          }

          .icon {
            width: 80px;
            height: 80px;
            margin-right: 24px;
            display: flex;
            align-items: center;
            justify-content: center;

            img {
              width: 64px;
              height: 64px;
            }
          }

          .info {
            flex: 1;

            .label {
              font-size: 16px;
              color: rgba(0, 0, 0, 0.45);
              margin-bottom: 8px;
            }

            .value {
              font-size: 32px;
              font-weight: 500;
              color: rgba(0, 0, 0, 0.85);

              &.success {
                color: #52c41a;
              }

              &.warning {
                color: #faad14;
              }

              &.danger {
                color: #ff4d4f;
              }

              &.primary {
                color: #1890ff;
              }
            }
          }
        }
      }
    }

    .overview-cards-1 {
      display: flex;
      justify-content: space-between;
      margin: -12px;

      .card-item {
        flex: 1;
        padding: 12px;
        cursor: pointer;

        .card-content {
          background: #fff;
          padding: 32px;
          border-radius: 8px;
          display: flex;
          align-items: center;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
          transition: all 0.3s;
          min-height: 260px;

          &:hover {
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
            transform: translateY(-2px);
          }

          .icon {
            width: 160px;
            height: 160px;
            margin-right: 24px;
            display: flex;
            align-items: center;
            justify-content: center;

            img {
              width: 128px;
              height: 128px;
            }
          }

          .info {
            flex: 1;

            .label {
              font-size: 32px;
              color: rgba(0, 0, 0, 0.45);
              margin-bottom: 8px;
            }

            .value {
              font-size: 64px;
              font-weight: 500;
              color: rgba(0, 0, 0, 0.85);

              &.success {
                color: #52c41a;
              }

              &.warning {
                color: #faad14;
              }

              &.danger {
                color: #ff4d4f;
              }

              &.primary {
                color: #1890ff;
              }
            }
          }
        }
      }
    }
  }
</style>